<template>
  <view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryContributionValuePage">
      <template #top>
        <view>
          <mt-navbar title="贡献值明细" bg-color="#1484EE" left-icon-color="#ffffff" :title-style="{ color: '#ffffff' }">
            <template #right>
              <view class="flex flex-justify-between flex-items-center align-top" @click="handleRuleExplanation">
                <uv-icon
                  name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-warning-color-white.svg"
                  color="#ffffff"
                  size="16"
                ></uv-icon>
                <text class="text-24rpx text-#ffffff fw-400 ml-8rpx">规则说明</text>
              </view>
            </template>
          </mt-navbar>
          <view class="drop-box">
            <view class="custom-drop">
              <uv-tabs
                :list="tabList"
                :current="currentTab"
                :active-style="{ color: '#1484EE', fontWeight: 'bold' }"
                :inactive-style="{ color: '#727687' }"
                line-width="32"
                line-color="#1484EE"
                @click="tabsChange"
              ></uv-tabs>
            </view>
            <view class="flex items-center px-16rpx" style="box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(0, 0, 0, 0.15)" @click="handleOpenProductList">
              <uv-icon name="list" color="#727687" size="20"></uv-icon>
            </view>
          </view>
        </view>
      </template>
      <view class="pt-32rpx px-32rpx">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          :class="{
            'rank': true,
            'rank_1': item.productRank === 1,
            'rank_2': item.productRank === 2,
            'rank_3': item.productRank === 3,
            'flex': true,
            'flex-justify-between': true,
            'flex-items-center': true,
            'mb-40rpx': true
          }"
        >
          <view class="left flex flex-col">
            <view class="mb-16rpx">
              <text class="text-#727687 text-24rpx fw-400">{{ item.effectiveMouth }}月贡献值</text>
            </view>
            <text class="text-#1C213E fw-600 text-48rpx">{{ item.contributionValue }}</text>
          </view>
          <view class="right flex flex-col flex-items-center">
            <block v-if="item.productRank <= 3">
              <uv-icon
                :name="`https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-index-order-ranking-${item.productRank}.svg`"
                color="#727687"
                size="32"
              ></uv-icon>

              <text class="text-#727687 text-24rpx fw-400">第{{ item.productRank }}名</text>
            </block>

            <view v-else class="flex flex-col flex-items-center">
              <view class="mb-16rpx">
                <text class="text-#727687 text-24rpx fw-400">排名</text>
              </view>
              <text class="text-#CED0D8 text-56rpx fw-600">{{ item.productRank }}</text>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <!--产品折叠框-->
    <mt-popup ref="popupRef" title="选择产品" :top-confirm="false" close-on-click-overlay @reset="handleReset" @confirm="handleConfirm">
      <template #right>
        <uv-icon name="search" color="#727687" size="30"></uv-icon>
      </template>
      <view class="px-32rpx">
        <uv-search v-model="productName" placeholder="搜索你想找的产品" :show-action="false" :clearabled="false" @change="handleInput"></uv-search>
      </view>
      <view class="flex flex-wrap flex-justify-between px-32rpx py-32rpx">
        <block v-if="selectProductList.length > 0">
          <view
            v-for="item in selectProductList"
            :key="item.id"
            :class="['product-search-item', 'mb-16rpx', 'px-24rpx', 'py-32rpx', { 'active': currentProductName === item.name }]"
            @click="handleSelectProduct(item)"
            >{{ item.name }}</view
          >
        </block>
        <mt-empty-view v-else></mt-empty-view>
      </view>
    </mt-popup>

    <!--规则说明-->
    <mt-modal ref="ruleExplanationRef">
      <view class="container">
        <view class="px-58rpx">
          <view class="flex">
            <view class="line flex mb-32rpx">
              <view class="line-left"></view>
              <text class="px-24rpx text-#1A1A1A text-32rpx font-bold">规则说明</text>
              <view class="line-right"></view>
            </view>
          </view>
        </view>
        <view class="pb-24rpx px-32rpx">
          <text class="text-#727687 fw-400 text-28rpx"> 贡献值每月重置，线索分配按照上月贡献值高低影响分配。贡献值越高，线索分配越优先。 </text>
          <view v-for="(item, index) in ruleExplanationText" :key="index" class="flex flex-items-center mt-24rpx mb-24rpx ml-16rpx">
            <view class="dot mr-16rpx"></view>
            <text class="text-#1C213E text-28rpx fw-400">{{ item.label }}</text>
          </view>
        </view>
        <view class="flex flex-items-center flex-justify-around border border-t-solid border-#D7DBE1 pt-28rpx" @click="handleCloseRuleExplanation">
          <text class="text-#1484EE text-40rpx fw-400">我知道了</text>
        </view>
      </view>
    </mt-modal>
  </view>
</template>

<script setup>
import { getContributionValuePage } from '@/api/index.js';
import { productgetProductPageApp } from '@/api/mixed';
import { debounce } from '@/utils/tools';

const popupRef = ref(null);
const ruleExplanationRef = ref(null);

// 规则说明内容
const ruleExplanationText = ref([
  {
    label: '每成交10元等于1贡献值'
  },
  {
    label: '每发放10元佣金等于1贡献值'
  },
  {
    label: '邀约盟友每成交10元等于1贡献值'
  },
  {
    label: '线索成交流程小于10天加10贡献值'
  },
  {
    label: '月成交率大于50%加10贡献值'
  }
]);

const tabList = ref([]);

const pagingRef = ref(null);

// 规则说明
const handleRuleExplanation = () => {
  const options = {
    slot: true,
    showTitle: false,
    showFooter: false,
    success: async (e) => {}
  };
  ruleExplanationRef.value.open(options);
};

const handleCloseRuleExplanation = () => {
  ruleExplanationRef.value.close();
};
const productId = ref();
// 当前选中的 tab 索引
const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  productId.value = e.id;
  currentTab.value = e.index;
  // tabList.value[e.index].badge.color = '#1484EE';
  pagingRef.value.reload();
  // queryContributionValuePage(e.id);
}

const productName = ref();
// 选中的产品名称
const currentProductName = ref('');
const selectProductList = ref([]);
// 获取产品列表
const queryProductList = async (type) => {
  const params = {
    productName: productName.value,
    pageNum: 1,
    pageSize: 10
  };
  const { data, code } = await productgetProductPageApp(params);
  if (code === 200) {
    if (type === 'list') {
      tabList.value = data.items.map((item) => {
        return {
          name: item.productName,
          id: item.id
        };
      });
      productId.value = tabList.value[0].id;
      queryContributionValuePage();
    } else {
      selectProductList.value = data.items.map((item) => {
        return {
          name: item.productName,
          id: item.id
        };
      });
    }
  }
};
const productPageData = ref([]);
// 获取贡献值明细
const queryContributionValuePage = async (pageNum) => {
  try {
    const params = {
      productId: productId.value,
      lastId:
        productPageData.value && productPageData.value.length && pageNum > 1 ? productPageData.value[productPageData.value.length - 1] : undefined,
      size: 10
    };
    const { data } = await getContributionValuePage(params);
    productPageData.value = data.data;
    pagingRef.value.complete(data.data);
  } catch (e) {
    pagingRef.value.complete(false);
  }
};

// 展开产品列表
const handleOpenProductList = () => {
  queryProductList('search');
  popupRef.value.open();
};

const handleInput = debounce(function () {
  queryProductList('search');
});

// 选择产品
const handleSelectProduct = (item) => {
  currentProductName.value = item.name;

  productId.value = item.id;
  popupRef.value.close();
  queryContributionValuePage();
};

onLoad(() => {
  queryProductList('list');
});
</script>

<style lang="scss" scoped>
.drop-box {
  position: relative;
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 31rpx 62rpx -15rpx rgba(0, 0, 0, 0.1);
  .custom-drop {
    flex: 1;
    min-width: 0;
  }
}
.list-li {
  .apply-btn.mt-button {
    min-width: 160rpx;
    font-size: 28rpx;
    color: #1a1a1a;
    padding: 16rpx 24rpx;
    margin-left: 16rpx;
  }
}

:deep(.mt-modal-body) {
  background: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/head-gradient-bg.png') no-repeat;
  padding: 40rpx 0 28rpx !important;
}

.container {
  .line {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    .line-left {
      width: 22%;
      border-radius: 0px 0px 0px 0px;
      border-bottom: 1px solid;
      border-image: linear-gradient(90deg, rgba(20, 132, 238, 0), rgba(20, 132, 238, 1)) 1 1;
    }
    .line-right {
      width: 22%;
      border-radius: 0px 0px 0px 0px;
      border-bottom: 1px solid;
      border-image: linear-gradient(90deg, rgba(20, 132, 238, 1), rgba(217, 185, 151, 0)) 1 1;
    }
  }
  .dot {
    width: 10rpx;
    height: 10rpx;
    background-color: #1c213e;
    border-radius: 50%;
  }
}

.rank {
  background: #ffffff;
  border-radius: 0px 4px 4px 0px;
  padding: 32rpx 40rpx 32rpx 32rpx;
}

.rank_1 {
  background: linear-gradient(270deg, rgba(247, 204, 90, 0.1) 0%, rgba(247, 204, 90, 0) 100%);
  border-radius: 0px 4px 4px 0px;
  padding: 32rpx 40rpx 32rpx 32rpx;
}

.rank_2 {
  background: linear-gradient(270deg, #f5faff 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 0px 4px 4px 0px;
  padding: 32rpx 40rpx 32rpx 32rpx;
}

.rank_3 {
  background: linear-gradient(270deg, #fdf3ec 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 0px 4px 4px 0px;
  padding: 32rpx 40rpx 32rpx 32rpx;
}

.product-search-item {
  background: #f9f9f9;
  border-radius: 2px 2px 2px 2px;
  width: 42%;
}

.active {
  background-color: rgba(20, 132, 238, 0.7);
  color: #fff;
}
</style>
